<script setup>
import {onMounted} from 'vue'
import {NAvatar, NButton, NFlex, NImage, NInput, NTag} from 'naive-ui'

import CommonPage from '@/components/page/CommonPage.vue'
import api from '@/api'
import default_image from "@/assets/images/mz.jpg";

const props = defineProps({
  infoData: {
    type: Object,
    required: true
  }
});
const data = reactive({
  tags:[],
  sex_options: ["女","男"],
  customer_id:0,
  search_goods:'',
  goods:[],
  orders:[],
  appointments:[],
  visits:[],
  buckling_pics:[],
  examList:[],
  submitTime:''
});

onMounted(() => {
  data.customer_id = props.infoData.id
  get_goods()
  get_appointment()
  get_orders()
  get_visit()
  get_buckling_pic()
  get_exam()
  get_consumables()
})

function get_goods(){
  api.getSaasBucklingList({
    page: 1,
    page_size: 100,
    name:data.search_goods,
    user_id:data.customer_id
  }).then((res) => {
    data.goods = res.data
    data.goods.map(item => {
      item.is_expand = false
    })
  })
}

function get_orders(){
  api.getOrdersList({
    page: 1,
    page_size: 1000,
    customer_id:data.customer_id
  }).then((res) => (data.orders = res.data))
}

function get_appointment(){
  // 没数据
  api.getAppointmentList({
    page: 1,
    page_size: 1000,
    customer_id:data.customer_id,
  }).then((res) => (data.appointments = res.data))
}

function get_visit(){
  // 没数据
  api.getCustomerVisit({
    page:1,
    page_size:100,
    customer_id:data.customer_id
  }).then((res) => (data.visits = res.data))
}
function show_expand(index){
  data.goods[index].is_expand = !data.goods[index].is_expand
}

function get_buckling_pic(){
  api.getUserPhoto({
    customer_id:data.customer_id
  }).then((res) => (data.buckling_pics = res.data))
}

function get_exam(){
  api.getUserAnswer({
    page:1,
    page_size:100,
    exam_id: 42,
    customer_id:data.customer_id
  }).then((res) => {
    if (res.code === 200) {
      let examList = res.data;
      if (examList.length !== 0) {
        data.submitTime = examList[0].created_at;
        data.examList = examList[0].user_answer.map((question, index) => ({
          title: question.question,
          value: question.answer.join("/"),
          remark: question.input_answer || "无",
        }));
        console.log(data.examList);
      } else {
        data.examList = null;
      }
    }
  })
}

function get_consumables(){
  // 没数据
  api.getUserConsumable({
    customer_id:data.customer_id
  }).then((res) => (data.consumables = res.data))
}

// 监听 props.infoData 变化
watch(
  () => props.infoData,
  (newVal) => {
    get_goods()
  },
  { deep: true } // 深度监听（如果 infoData 是对象）
);

</script>

<template>
  <!-- 业务页面 -->
  <CommonPage show-footer title="会员详情" style="padding: 10px">
    <n-alert :title="props.infoData.name+'['+props.infoData.phone+']'" type="success">
      <n-dynamic-tags type="primary" v-model:value="data.tags" style="margin:10px 0"/>
    </n-alert>
    <n-card content-style="padding: 0;" embedded style="margin-top:20px">
      <n-tabs type="line" animated size="large" :tabs-padding="20" pane-style="padding: 20px;">
        <n-tab-pane name="基础信息">
          <n-divider>基本资料</n-divider>
          <n-descriptions label-placement="left" bordered :column="3">
            <n-descriptions-item label="姓名"><NTag type="primary" :bordered="false">{{props.infoData.name}}</NTag></n-descriptions-item>
            <n-descriptions-item label="卡号"><NTag type="primary" :bordered="false">{{props.infoData.card_no}}</NTag></n-descriptions-item>
            <n-descriptions-item label="会员级别"><NTag type="primary" :bordered="false">{{props.infoData.role_name}}</NTag></n-descriptions-item>
            <n-descriptions-item label="电话"><NTag type="primary" :bordered="false">{{props.infoData.phone}}</NTag></n-descriptions-item>
            <n-descriptions-item label="所属门店"><NTag type="primary" :bordered="false">{{props.infoData.phone}}</NTag></n-descriptions-item>
            <n-descriptions-item label="来源平台"><NTag type="primary" :bordered="false">{{props.infoData.platform_name}}</NTag></n-descriptions-item>
            <n-descriptions-item label="会员生日"><NTag type="primary" :bordered="false">{{props.infoData.birth}}</NTag></n-descriptions-item>
            <n-descriptions-item label="会员性别"><NTag type="primary" :bordered="false">{{data.sex_options[props.infoData.sex]}}</NTag></n-descriptions-item>
            <n-descriptions-item label="身份证号"><NTag type="primary" :bordered="false">{{props.infoData.identity}}</NTag></n-descriptions-item>
            <n-descriptions-item label="推荐上级"><NTag type="primary" :bordered="false">{{props.infoData.parent_name}}</NTag></n-descriptions-item>
            <n-descriptions-item label="会员年龄"><NTag type="primary" :bordered="false">{{props.infoData.age}}</NTag></n-descriptions-item>
            <n-descriptions-item label="注册时间"><NTag type="primary" :bordered="false">{{props.infoData.created_at}}</NTag></n-descriptions-item>
            <n-descriptions-item label="上次登入"><NTag type="primary" :bordered="false">{{props.infoData.last_login}}</NTag></n-descriptions-item>
          </n-descriptions>
          <n-divider>资产信息</n-divider>
          <n-descriptions label-placement="left" bordered :column="2">
            <n-descriptions-item label="储值金余额"><NTag type="primary" :bordered="false">{{props.infoData.money_deposit}}</NTag></n-descriptions-item>
            <n-descriptions-item label="赠送金余额">
              <NTag v-if="props.infoData.money_deposit>props.infoData.money_zs_deposit" type="primary" :bordered="false">{{props.infoData.money_zs_deposit}}</NTag>
              <NTag v-if="props.infoData.money_deposit<=props.infoData.money_zs_deposit" type="primary" :bordered="false">{{props.infoData.money_deposit}}</NTag>
            </n-descriptions-item>
            <n-descriptions-item label="积分余额"><NTag type="primary" :bordered="false">{{props.infoData.money_integral}}</NTag></n-descriptions-item>
            <n-descriptions-item label="优惠券余额"><NTag type="primary" :bordered="false">{{props.infoData.money_coupons}}</NTag></n-descriptions-item>
            <n-descriptions-item label="成长积分"><NTag type="primary" :bordered="false">{{props.infoData.level_integral}}</NTag></n-descriptions-item>
          </n-descriptions>
        </n-tab-pane>
        <n-tab-pane name="卡项套餐">
          <n-card style="height:100%" content-style="padding: 0px;"  size="small" :segmented="{
          content: true,
          footer: 'soft',
        }">
          <div style="margin:20px">
            <NInput v-model:value="data.search_goods" size="large" clearable type="text" placeholder="请输入商品名称"
                    @keyup="get_goods()" />
          </div>
          <n-scrollbar v-if="data.goods.length>0" style="max-height:480px;padding:0 20px 20px 20px">
            <n-card embedded v-for="(item,index) in data.goods" class="customer_card" hover:card-shadow  size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }">
              <template #header-extra>
                <div>
                  <div style="margin-bottom: 8px;">
                    <NTag v-if="item.status===0" size="large">未开卡</NTag>
                    <NTag type="info" v-if="item.status===1" size="large">疗程中</NTag>
                    <NTag type="warning" v-if="item.status===2" size="large">已用完</NTag>
                  </div>
                  <n-button  quaternary v-show="item.is_expand" @click="show_expand(index)">^</n-button>
                  <n-button quaternary v-show="!item.is_expand" @click="show_expand(index)">∨</n-button>
                </div>
              </template>
              <template #header>
                <div style="position: absolute; top: 0; left: 0; z-index: 1;border-radius: 50px">
                  <NTag :bordered="false"
                      :style="{
                        borderRadius: '8px 0 0 0',
                        background: 'linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%)',
                        color: 'white',
                        width: '65px',
                        height: '30px',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center'
                      }"  v-if="item.groups?.[0]?.group_id">套餐卡</NTag>
                  <NTag
                      :bordered="false"
                      :style="{
                        borderRadius: '8px 0 0 0',
                        background: 'linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%)',
                        color: 'white',
                        width: '65px',
                        height: '30px',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center'
                      }" v-else >项目</NTag>
                </div>
                <div style="display: flex; align-items: center;margin-top: 30px">
                  <NAvatar :src="item.goods_cover" :fallbackSrc="default_image" style="width: 50px; height: 50px; margin-right: 10px;" />
                  <div style="height:40px;line-height:20px">{{ item.goods_name }}
                    <br>
                    <span style="font-size: 12px;color:#747586">{{item.created_at	}}</span>
                  </div>
                </div>
              </template>

              <template v-if="item.type===1 && item.status===1 && item.is_expand" #footer>
                <div style="width:100%;height:40px;line-height:40px;margin-bottom:5px"><NTag  size="small" type="primary">{{item.groups[0].buckling_item[0].good_name}}</NTag>&nbsp;&nbsp; <span style="font-size: 12px;color:#747586;float: right">剩余次数x{{item.groups[0].buckling_item[0].last_nums}}次</span></div>
              </template>
              <template v-if="item.type===2 && item.status===1 && item.is_expand" #footer>
                <n-collapse  justify="space-between" size="large" >
                <n-collapse-item :title="group['group_name']" v-for="(group,i) in item['groups']">
                  <template #header-extra>
                    <div v-if="group['group_name']">
                      <!--                        <span v-if="group['group_type']===1">单次可用{{group.times}}次</span>-->
                      <span style="font-size: 12px;color:#747586;float: right" v-if="group['group_type']===2">合计可用{{group.times}}次</span>
                      <span v-if="group['group_type']===3">时段{{group.times}}次</span>
                    </div>
                  </template>
                  <n-flex v-for="(buck,b) in group['buckling_item']"  justify="space-between" size="large" style="margin: 8px">
                    <NTag size="small" type="primary">{{buck['good_name']}}({{buck['sku_name']}})</NTag><span v-if="group['group_type']===1" style="font-size: 12px;color:#747586;float: right;line-height: 20px">剩余次数x{{buck['last_nums']}}次</span>
                  </n-flex>
                </n-collapse-item>
              </n-collapse>
              </template>
            </n-card>
          </n-scrollbar>
          <n-empty description="该客户暂无数据" v-else style="margin: 50px"></n-empty>
        </n-card>
        </n-tab-pane>
        <n-tab-pane name="订单记录">
          <n-card style="height:100%" content-style="padding: 0px;"  size="small">
          <n-scrollbar v-if="data.orders.length>0" style="max-height:550px;padding:0 20px 20px 20px">
            <n-card embedded v-for="(item,index) in data.orders" :title="data.orders[0].goods[0].goods_name" class="customer_card" hover:card-shadow  size="small">
              <template #header-extra>
                <NTag type="info" v-if="item.status===0" size="large">待付款</NTag>
                <NTag type="primary" v-if="item.status===1" size="large">已付款</NTag>
                <NTag v-if="item.status===2" size="large">已取消</NTag>
                <NTag type="warning" v-if="item.status===3" size="large">申请退款中</NTag>
                <NTag type="error" v-if="item.status===4" size="large">已退款</NTag>
              </template>
              <template #footer>
                <div style="display: flex; align-items: center;">
                  <NAvatar v-for="(item1,index1) in item.goods" :src="item1.goods_cover" :fallbackSrc="default_image" style="width: 40px; height: 40px; margin-right: 10px;" />
                  <div style="height:40px;line-height:20px">{{ item.goods_name }}  <span>{{item.sku_name}}(共{{item.goods.length}}件)</span><br><span style="font-size: 12px;color:#747586">{{ item.created_at }}</span></div>
                </div>
              </template>
            </n-card>
          </n-scrollbar>
          <n-empty description="该客户暂无数据" v-else style="margin: 50px"></n-empty>
        </n-card>
        </n-tab-pane>
        <n-tab-pane name="预约记录">
          <n-card style="height:100%" content-style="padding: 0px;"  size="small">
          <n-scrollbar v-if="data.appointments.length>0" style="max-height:550px;padding:0 20px 20px 20px">
            <n-card embedded v-for="(item,index) in data.appointments" class="customer_card" hover:card-shadow  size="small">
              <template #header-extra>
                <NTag type="info" v-if="item.status===0" size="large">待确认</NTag>
                <NTag type="success" v-if="item.status===1" size="large">通过</NTag>
                <NTag type="error" v-if="item.status===2" size="large">未通过</NTag>
                <NTag type="warning" v-if="item.status===3" size="large">已取消</NTag>
              </template>
              <template #header>
                <div style="display: flex; align-items: center;">
                  <NAvatar src="http://mini-1329442127.cos.ap-nanjing.myqcloud.com/upload/appointment/designer/PGvUNkmyxZ.png" :fallbackSrc="default_image" style="width: 50px; height: 50px; margin-right: 10px;border-radius: 50%" />
                  <div style="height:60px;line-height:20px">{{item.project_name	}}<br><span style="font-size: 12px;color:#747586">{{ item.designer_name_s }}</span><br>	<span style="font-size: 12px;color:#747586">{{ item.created_at }}</span></div>
                </div>
              </template>
            </n-card>
          </n-scrollbar>
          <n-empty description="该客户暂无数据" v-else style="margin: 50px"></n-empty>
        </n-card>
        </n-tab-pane>
        <n-tab-pane name="客户跟踪">
          <n-card style="height:100%" content-style="padding: 0px;"  size="small">
            <n-scrollbar style="max-height: calc(100vh - 150px);padding:0 20px 20px 20px" v-if="data.visits.length>0">
            <n-card embedded  v-if="data.visits.length>0" v-for="item in data.visits" class="customer_card" hover:card-shadow   size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }"
            >
              <template #header>
                <div style="display: flex; align-items: center;" >
                  <span style="color: #6a6a6a">{{item.created_at}}</span>
                </div>
              </template>
              <template #header-extra>
                <NTag type="primary">回访人:{{item.add_uname}}</NTag>
              </template>
              <div>
                {{item.remark}}
              </div>
              <div style="margin-top: 10px">
                <n-image-group :theme-overrides="imageGroupThemeOverrides">
                  <n-space>
                    <n-image v-for="image_item in item.remark_images" style="border-radius: 2px" width="50" height="100" :src="image_item.url"/>
                  </n-space>
                </n-image-group>
              </div>
            </n-card>
          </n-scrollbar>
          <n-empty description="该客户暂无数据" v-else style="margin: 50px"></n-empty>
        </n-card>
        </n-tab-pane>
        <n-tab-pane name="对比照">
          <n-card style="height:100%" content-style="padding: 0px;"  size="small">
          <n-scrollbar v-if="data.buckling_pics.length>0" style="max-height:550px;padding:0 20px 20px 20px">
            <n-card embedded v-for="(item,index) in data.buckling_pics" class="customer_card" hover:card-shadow  size="small">
              <template #header-extra>
                <NTag type="primary" size="large">{{item.created_at}}</NTag>
              </template>
              <template #header>
                <div style="display: flex; align-items: center;">
<!--                   <NTag type="primary" size="large">无针水光</NTag>&nbsp;-->
                   <NTag type="primary" size="large">{{item.designer_names}}</NTag>&nbsp;
                   <NTag type="primary" size="large">{{item.space_name}}</NTag>
                </div>
              </template>
              <template #footer>
                <div style="display: flex; align-items: center;">
                  <n-tabs type="line" animated size="large" :tabs-padding="20" pane-style="padding: 20px;">
                    <n-tab-pane name="术前照片">
                       <n-image-group :theme-overrides="imageGroupThemeOverrides">
                        <n-space>
                          <n-image v-for="(item1,index1) in item.before_pic" :key="index1" style="border-radius: 5px" width="50" height="50" :src="item1.url"/>
                        </n-space>
                      </n-image-group>
                    </n-tab-pane>
                    <n-tab-pane name="术后照片">
                       <n-image-group :theme-overrides="imageGroupThemeOverrides">
                        <n-space>
                          <n-image v-for="(item2,index2) in item.after_pic" :key="index2" style="border-radius: 5px" width="50" height="50" :src="item2.url"/>
                        </n-space>
                      </n-image-group>
                    </n-tab-pane>
                  </n-tabs>
                </div>
              </template>
            </n-card>
          </n-scrollbar>
          <n-empty description="该客户暂无数据" v-else style="margin: 50px"></n-empty>
        </n-card>
        </n-tab-pane>
        <n-tab-pane name="客户问卷">
          <n-card style="height:100%" content-style="padding: 0px;"  size="small">
            <n-collapse v-if="data.examList" >
                <div style="text-align: center;margin-bottom: 20px">
                  问卷日期:{{data.submitTime}}
                </div>
                <n-descriptions label-placement="left" bordered :column="1">
                  <n-descriptions-item v-for="(item,index) in data.examList" :label="item.title"><NTag type="primary" :bordered="false">{{item.value}}</NTag></n-descriptions-item>
                </n-descriptions>
            </n-collapse>
          <n-empty description="该客户暂无数据" v-else style="margin: 50px"></n-empty>
          </n-card>
        </n-tab-pane>
        <n-tab-pane name="耗材使用">
          <n-card style="height:100%" content-style="padding: 0px;"  size="small">
          <n-scrollbar v-if="data.consumables.length>0" style="max-height:550px;padding:0 20px 20px 20px">
            <n-card embedded v-for="(item,index) in data.consumables" class="customer_card" hover:card-shadow  size="small">
              <template #header-extra>
                <NTag type="primary" size="large">数量X{{item.nums}}{{item.danwei}}</NTag>
              </template>
              <template #header>
                <div style="display: flex; align-items: center;">
                  <div style="height:40px;line-height:20px">{{item.name}}{{item.guige}}<br><span style="font-size: 12px;color:#747586">{{ item.created_at }}</span></div>
                </div>
              </template>
            </n-card>
          </n-scrollbar>
          <n-empty description="该客户暂无数据" v-else style="margin: 50px"></n-empty>
        </n-card>
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </CommonPage>
</template>

<style>
.customer_card{
  margin: 10px 0;
}
</style>